<template>
    <header class="banner clearfix">
        <a v-show="back" class="back" @click="historyBack" href="javascript:;">
            <i class="icon-back"></i>
        </a>
        <a @click="toggleMenu" class="more" href="javascript:;">
            <i class="icon-plus"></i>
        </a>
        <span @click="backToTop" class="top-title ellipsis"><img class="logo" src="/static/images/sprite/icon_logo.png" alt="笑料百出"/>{{title}}</span>
        <div @click="toggleMenu" class="menu" :class="{'hide': hide}">
            <div class="list">
                <a  v-link="{name: 'follow'}">
                    <i class="icon-star"></i>关注我们
                </a>
            </div>
            <div class="list">
                <a v-link="{name: 'feedback'}">
                    <i class="icon-feedback"></i>用户反馈
                </a>
            </div>
        </div>
    </header>
</template>

<script>
import store from './../../store'
import utils from './../../utils'

export default {
    name: 'HeaderView',
    data () {
        return {
            hide: true
        }
    },
    props: {
        title: String,
        back: Boolean
    },
    methods: {
        toggleMenu: function () {
            if(this.hide){
                this.hide = false;
            }else{
                this.hide = true;
            }
        },
        historyBack: function(){
            var name = this.$route.name;
            if(name === 'detail'){
                let cid = Number(this.$route.params.cid);
                let tid = Number(this.$route.params.tid);
                let link;
                if(tid === -1){
                    link ='#!/cid/' + cid;
                }else{
                    link = '#!/cid/' + cid + '/tid/' + tid;
                }
                location.href = link;
            }else if(name === 'subject'){
                let cid = Number(this.$route.params.id);
                location.href = '#!/cid/' + cid;
            }else{
                window.history.back();
            }
        },
        backToTop: function(){
            window.scrollTo(0, 0);
        }
    },
    ready() {
        document.addEventListener('click', function (e) {
            var target = e.target;
            var isMore = utils.bubblingToEle(target, 'className', 'more');
            if(!this.hide && !isMore){
                this.hide = true;
            }
        }.bind(this))
    }
}
</script>

<style>
    .banner{
        position: relative;
        width: 100%;
        height: 48px;
        line-height: 48px;
        background-color: #ffb400;
    }

    .banner .back{
        float: left;
        padding: 0 10px 0 20px;
    }

    .banner .more{
        float: right;
        padding: 0 15px;
    }

    .banner .top-title{
        position: absolute;
        left: 50px;
        right: 50px;
        font-size: 15px;
        vertical-align: middle;
        text-align: center;
        color: #fff;
    }

    .banner .menu{
        position: absolute;
        right: 10px;
        top: 46px;
        z-index: 9999;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, .5);
    }

    .banner .menu:before{
        content: '';
        position: absolute;
        right: 14px;
        bottom: 100%;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-bottom: 6px solid rgba(0, 0, 0, .5);
    }

    .banner .menu .list{
        border-bottom: 1px solid #aeaeae;
        height: 46px;
        font-size: 12px;
        line-height: 46px;
        color: #fff;
    }

    .banner .menu .list:last-child{
        border-bottom: none;
    }

    .banner .menu .list a{
        display: block;
        padding: 0 12px;
        height: 100%;
        color: #fff;
    }

    .banner .menu .list i{
        position: relative;
        top: -2px;
        margin-right: 10px;
        vertical-align: middle;
    }

    .icon-star{
        display: inline-block;
        width: 16px;
        height: 16px;
        background-size: 100% 100%;
        background-image: url('/static/images/sprite/icon_star.png');
    }

    .icon-feedback{
        display: inline-block;
        width: 16px;
        height: 16px;
        background-size: 100% 100%;
        background-image: url('/static/images/sprite/icon_feedback.png');
    }

    .icon-plus{
        display: inline-block;
        position: relative;
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .icon-plus:before, .icon-plus:after{
        content: '';
        pointer-events: none;
        position: absolute;
        border-radius: 2px;
        left: 50%;
        top: 50%;
        background-color: #fff;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    .icon-plus:before{
        width: 18px;
        height: 2px;
    }

    .icon-plus:after{
        width: 2px;
        height: 18px;
    }

    .icon-back{
        display: inline-block;
        position: relative;
        border-bottom: 2px solid #fff;
        border-left: 2px solid #fff;
        width: 11px;
        height: 11px;
        vertical-align: middle;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .logo{
        display: inline-block;
        margin-right: 10px;
        width: 26px;
        vertical-align: middle;
    }
</style>